<template>
  <div class="mod-config">
    <basic-container>
      <div class="boxsty">
      <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">测评票管理( 评议 )</div>
          <div class="tablelink">

            <el-link icon="el-icon-plus" type="primary" v-if="permissions.ceping_cepingcpppypzb_add" @click="addOrUpdateHandle()" :underline="false">新增测评票配置</el-link>
          </div>
        </div>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="form-inline">
          <el-form-item label="测评票名称">
            <el-input v-model="dataForm.cppName" style="width:255px" placeholder="请输入测评票名称"></el-input>
          </el-form-item>
          <el-form-item label="评分规则">
            <el-input v-model="dataForm.gzxxName" style="width:245px" placeholder="请输入评分规则"></el-input>
          </el-form-item>
          <el-form-item label="应用状态">
            <el-select :clearable="true" v-model="dataForm.xmZt" placeholder="请选择状态" class="zhuangTai">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="测评关系">
            <el-input v-model="dataForm.cpgzName" style="width:255px" placeholder="请输入测评关系"></el-input>
            <el-button type="primary" class="marginLeft" v-if="permissions.ceping_cepingcpppypzb_view" icon="el-icon-search" @click="getDataList()" :underline="false">检索</el-button>
          </el-form-item>
        </el-form>
      <!-- <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.cppName" style="width:300px" placeholder="请输入测评票名称"></el-input>
          <el-button v-if="permissions.ceping_cepingcpppypzb_view" icon="el-icon-plus" type="primary" @click="getDataList()">检索</el-button>
          <el-button v-if="permissions.ceping_cepingcpppypzb_add" icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
        </el-form-item>
      </el-form> -->

      <div>
        <el-table :data="dataList" v-loading="dataListLoading" stripe class="avue-crud" style="height:60vh;">
          <el-table-column type="index" width="60" label="序号">
          </el-table-column>
          <el-table-column prop="cppName" label="测评票名称" min-width="130">
          </el-table-column>
          <el-table-column prop="mark" label="备注" min-width="60">
            </el-table-column>
          <el-table-column prop="title" label="测评票标题" min-width="130">
          </el-table-column>
<!--          <el-table-column prop="xmxxName" label="测评项目名称" min-width="130">-->
<!--          </el-table-column>-->
          <el-table-column prop="ruleName" label="测评规则名称" min-width="130">
          </el-table-column>
          <el-table-column prop="cpgzName" label="测评关系名称" min-width="130">
          </el-table-column>
          <el-table-column prop="xmZt" label="应用状态" min-width="60">
            <template slot-scope="scope">
              <span :class="Zt(scope.row.xmZt)">{{scope.row.xmZt==1?"显示":"隐藏"}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作"   width="380">
            <template slot-scope="scope">
              <el-button v-if="permissions.ceping_cepingcpppypzb_view" type="primary" plain @click="reading(scope.row)">阅览</el-button>
              <el-button v-if="permissions.ceping_cepingcpppypzb_edit" type="primary" plain @click="updatexmZt(scope.row.id,scope.row.xmZt==1?0:1)">{{scope.row.xmZt==1?"隐藏":"显示"}}</el-button>
              <el-button v-if="permissions.ceping_cepingcpppypzb_edit" type="primary" plain @click="copyHandle(scope.row.id)">复用</el-button>
              <el-button v-if="permissions.ceping_cepingcpppypzb_edit" type="primary" plain @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
              <el-button v-if="permissions.ceping_cepingcpppypzb_del" type="danger" plain @click="deleteHandle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
        <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      </div>

      <!-- 弹窗, 新增 / 修改 -->
      <table-form-pz v-if="addOrUpdateVisiblePz" ref="addOrUpdate" @refreshDataList="getDataList"></table-form-pz>

      <copyForm v-if="copyVisible" ref="copyForm" @refreshDataList="getDataList"></copyForm>
      <!--  -->
      <CepingpiaoYulan3 v-if="cepingpiaoYulanVisible3" ref="cepingpiaoYulan3"></CepingpiaoYulan3>
      <CepingpiaoYulan4 v-if="cepingpiaoYulanVisible4" ref="cepingpiaoYulan4"></CepingpiaoYulan4>
      <CepingpiaoYulan5 v-if="cepingpiaoYulanVisible5" ref="cepingpiaoYulan5" @closeDialog="closeDialog5"></CepingpiaoYulan5>
    </basic-container>
  </div>
</template>

<script>
/*!
 * 绩效考核-测评票管理列表
 *
 * @author zmk
 * @date 2021-06-22 09:11:35
 */
import { fetchList, delObj, updatexmZt } from '@/api/ceping/jxevalsheet'
import TableFormPz from './cepingcpppypzb-form-pz'
import copyForm from './cepingcpppypzb-form-pz_dup'
import CepingpiaoYulan3 from './cepingpiaoYulan3'
import CepingpiaoYulan4 from './cepingpiaoYulan4'
import CepingpiaoYulan5 from './cepingpiaoYulan5'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      dataForm: {
        cppName: '',
        gzxxName: '',
        cpgzName: '',
        xmZt: '1',
      },
      options: [{
        value: '1',
        label: '显示'
      }, {
        value: '0',
        label: '隐藏'
      }],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisiblePz: false,
      copyVisible:false,
      cepingpiaoYulanVisible3:false,
      cepingpiaoYulanVisible4:false,
      cepingpiaoYulanVisible5:false
    }
  },
  components: {
    TableFormPz,
    CepingpiaoYulan3,
    CepingpiaoYulan4,
    CepingpiaoYulan5,
    copyForm
  },
  created() {
    this.getDataList()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    //项目状态修改
    updatexmZt(id, xmzt) {
      updatexmZt(id, xmzt).then(data => {
        this.$notify.closeAll();
        this.$notify.success('操作成功');
        this.getDataList();
      }).catch(error => {
        this.$notify.closeAll();
        this.$notify.success('系统错误');

      });
    },
    //状态
    Zt(value) {
      return {
        yinCang: value === '0',
        green: value === '1',
        // blue: value === "002",
        // green: value === "003",
      };
    },
    //测评票阅览 功能开发中
    reading(r) {
      if(r.sheetType == '3'){
        this.cepingpiaoYulanVisible3 = true;
        this.$nextTick(() => {
          this.$refs.cepingpiaoYulan3.initXp(r)
        });
      }else if(r.sheetType == '4'){
        this.cepingpiaoYulanVisible4 = true;
        this.$nextTick(() => {
          this.$refs.cepingpiaoYulan4.initXp(r)
        });
      }else if(r.sheetType == '5'){
        this.cepingpiaoYulanVisible5 = true;
        this.$nextTick(() => {
          this.$refs.cepingpiaoYulan5.initXp(r)
        });
      }
      // if(r.xmxxConfig){
      //   let xmxx = JSON.parse(r.xmxxConfig);
      //   if(typeof(xmxx.type) == 'undefined'){
      //     this.cepingpiaoYulanVisible = true;
      //     this.$nextTick(() => {
      //       this.$refs.cepingpiaoYulan.initXp(r)
      //     });
      //   }else{
      //     if(xmxx.type == '1'){
      //       this.cepingpiaoYulanVisible = true;
      //       this.$nextTick(() => {
      //         this.$refs.cepingpiaoYulan.initXp(r)
      //       });
      //     }else if(xmxx.type == '2'){
      //       this.cepingpiaoYulanVisibleMzpy = true;
      //       this.$nextTick(() => {
      //         this.$refs.cepingpiaoYulanMzpy.initXp(r)
      //       });
      //     }
      //   }
      // }else{
      //   this.cepingpiaoYulanVisible = true;
      //   this.$nextTick(() => {
      //     this.$refs.cepingpiaoYulan.initXp(r)
      //   });
      // }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisiblePz = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
        // 新增 / 修改
    copyHandle(id) {
      this.copyVisible = true
      this.$nextTick(() => {
        this.$refs.copyForm.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$notify.closeAll();
        this.$notify.success('删除成功')
        this.getDataList()
      })
    },
  }
}
</script>
<style scoped>
</style>
